<template>
    <div>
        <div class="box">
            <el-button type="success" @click="pan_tow = 1" class="tan">添加</el-button>
        </div>
        <template>
            <el-table :data="ass" style="width: 100%">
                <el-table-column label="ID">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="内容">
                    <template slot-scope="scope">
                        <span>{{ scope.row.contents }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="时间">
                    <template slot-scope="scope">
                        <span>{{ scope.row.bytime }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="标题">
                    <template slot-scope="scope">
                        <span>{{ scope.row.title }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        <el-button size="mini" type="warning" @click="detail(scope.row.id)">详情</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </template>

        <div class="box_one" v-if="pan == 1">

            <div class="box_tow">
                <br>
                <br>
                <el-input type="textarea" style="width: 25vw;" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
                <br>
                <br>
                <el-input placeholder="请输入标题" style="width: 25vw;" v-model="input" clearable></el-input>
                <br>
                <br>
                <el-input placeholder="请输入时间" style="width: 25vw;" v-model="input_one" clearable></el-input>
                <br>
              <button @click="ji()" class="tan_one">编辑</button>
              <button @click="pan = 0" class="tan_one">取消</button>
            </div>
      
        </div>

        <div class="box_one" v-if="pan_one == 0">
            <div class="box_tow">
                <p></p>
                <p>id:{{are.id}}</p>
                <p>内容:{{are.contents}}</p>
                <p>标题:{{are.title}}</p>
                <p>上传时间:{{are.bytime}}</p>

              <button @click="pan_one = 22" class="tan">关闭</button>
            </div>
        </div>

        <div class="box_one" v-if="pan_tow == 1">

            <div class="box_tow">
                <br>
                <br>
                <el-input type="textarea" style="width: 25vw;" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
                <br>
                <br>
                <el-input placeholder="请输入标题" style="width: 25vw;" v-model="input" clearable></el-input>
                <br>
                <br>
                <el-input placeholder="请输入时间" style="width: 25vw;" v-model="input_one" clearable></el-input>
                <br>
              <button @click="tian()" class="tan_one">添加</button>
              <button @click="pan_tow = 0" class="tan_one">取消</button>
            </div>
      
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ass: [],
            textarea: '',
            input: '',
            input_one: '',
            pan:0,
            bian:'',
            pan_one:1,
            are:{},
            pan_tow:0
        }
    },
    mounted() {
        this.add()
    },
    methods: {
        add() {
            this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/hao/getTowersList').then(res => {
                console.log(res.data.data);
                this.ass = res.data.data
            })
        },
        tian() {
            let add = {
                contents: this.textarea,
                title: this.input,
                bytime: this.input_one
            }
            this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/hao/addTowers', add).then(res => {
                this.$alert(res.msg, '标题名称', {
                    confirmButtonText: '确定',
                });
                this.textarea = ''
                this.input = ''
                this.input_one = ''
                this.pan_tow = 0
                this.add()
            })
        },
        handleDelete(i){

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        let add = {
                id:i
            }
            this.$apiGet('https://goods.zzgoodqc.cn/index.php/index/hao/delTowers',add).then(res=>{
                console.log(res);
                this.add()
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

        },
        handleEdit(i){
            console.log(i);
            this.bian=i
            this.pan = 1
        },
        ji(){
            let add = {
                contents: this.textarea,
                title: this.input,
                bytime: this.input_one,
                id:this.bian
            }
            this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/hao/addTowers', add).then(res => {
                this.$alert(res.msg, '标题名称', {
                    confirmButtonText: '确定',
                });
                this.pan = 0
                this.textarea = ''
                this.input = ''
                this.input_one = ''

                this.add()
            })
        },
        detail(i){
            console.log(i);
            this.pan_one = 0
            let add ={
                id:i
            }

            this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/hao/getTowersbyid',add).then(res=>{
                console.log(res.data);
                this.are = res.data
            })
        }
    }
}
</script>

<style scoped>

.tan_one {
    width: 5vw;
    height: 5vh;
    margin-top: 3vh;
  }

.box_tow {
    width: 50vw;
    height: 40vh;
    background: #fff;
    margin: auto;
    text-align: center;
    margin-top: 30vh;
  }
  
  .box_one {
    width: 100%;
    height: 99vh;
    background: rgba(33, 30, 30, 0.8);
    position: absolute;
    top: 0px;
    left: 0px;
  }

.box {
    width: 100%;
    height: 10vh;
    text-align: center;
}

.tan {
    width: 6vw;
    height: 5vh;
   
}
</style>